<template>
    <div class="notice_tab">
      <div class="tab_ul">
        <div class="tab_li">
          <router-link to="/VillageNotice" replace>
            <div>
              <span>小区公告</span>
            </div>
          </router-link>
        </div>
        <div class="tab_li">
          <router-link to="/MeetNotice" replace>
            <div>
              <span>会议公告</span>
            </div>
          </router-link>
        </div>
      </div>
      <!--显示子路由内容部分-->
      <router-view></router-view>
    </div>
</template>

<script>
  export default {
    name: 'NoticeTab'
  }
</script>

<style lang="scss" scoped>
.notice_tab{
  width: 100%;
  padding-top: 40px;
  .tab_ul{
    width: 100%;
    height: 50px;
    list-style: none;
    background: #fff;
    right: 0;
    left: 0;
    position: fixed;
    z-index: 2;
    .tab_li{
      width: 50%;
      float: left;
      height: 50px;
      text-align: center;
      a {
        width: 100%;
        color: #0078de;
        font-size: 15px;
        text-align: center;
        text-decoration: none;
        div {
          height: 48px;
          span {
            line-height: 50px;
          }
        }
      }
      a.active {
        color: #0078de;
        font-size: 15px;
        font-weight: bolder;
        text-align: center;
        span{
          border-bottom: 3px solid #0c7ad9;
          padding-bottom: 10px;
        }
      }
    }
    .tab_li:first-child {
      border-left: none;
    }
    .tab_li:last-child {
      border-right: none;
    }
  }
}
</style>
